import {
  getStandProductProcessInfoByPage,
  addStandProductProcessInfo,
  updateStandProductProcessInfo,
  delStandProductProcessInfo,
  exportStandProductProcessInfo,
} from '@/services/design/standProductProcessInfo';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Select, Button, Form, Input, message, Modal, Tree, Row, Col, InputNumber } from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { PlusOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { history } from 'umi';
const StandProductProcessInfo: React.FC<{}> = (props) => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const ref = useRef(null);

  StandProductProcessInfo.defaultProps = {
    // thisstandTypeCode: '',
    // thisstandTypeDesc: '',
    thisstandid: '',
    thestate: 0,
  };
  // const thisstandTypeCode = props.thestandTypeCode;
  // const thisstandTypeDesc = props.thestandTypeDesc;
  const thisstandid = props.thestandid;
  const thestate = props.thestate;

  const columns: ProColumns[] = [
    // {
    //   title: '序号',
    //   hideInTable: true,
    //   dataIndex: 'index',
    //   valueType: 'index',
    //   width: 40,
    // },
    // {
    //   title: '标准柜体id',
    //   dataIndex: 'standTypeId',
    //   hideInTable: true,
    // },
    {
      title: '工序顺序',
      dataIndex: 'sequence',
      width: 60,

      align: 'center',
      sorter: true,
    },
    {
      title: '工序名称',
      width: 80,
      dataIndex: 'processName',

      align: 'center',
      sorter: true,
    },
    {
      title: '工序编号',
      width: 80,
      dataIndex: 'processCode',

      // sorter: (a, b) => a.processCode - b.processCode,
      align: 'center',
      sorter: true,
    },
    {
      title: '标准工时 (h)',
      width: 70,
      dataIndex: 'standWorkHour',
      render: (text, record, _, action) => {
        return <div>{record.standWorkHour.toFixed(2)}</div>;
      },
      align: 'center',
      sorter: true,
    },
    {
      title: '标准周期 (天)',
      dataIndex: 'standCycle',
      width: 75,
      render: (text) => {
        return <div>{text}</div>;
      },
      align: 'center',
      sorter: true,
    },
    {
      title: '是否生产工序',
      width: 90,
      dataIndex: 'isProductionProcess',
      render: (text) => {
        return <div>{text === 1 ? '是' : '否'}</div>;
      },
      align: 'center',
      sorter: true,
    },
    {
      title: '是否需要自检',
      width: 90,
      dataIndex: 'showSelfInspection',
      render: (text) => {
        return <div>{text === 1 ? '是' : '否'}</div>;
      },
      align: 'center',
      sorter: true,
    },
    {
      title: '工艺路径编号',
      width: 140,
      dataIndex: 'bopCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '工艺路径名称',
      dataIndex: 'bopName',
      width: 140,
      align: 'center',
      sorter: true,
    },
    // {
    //   title: '标准柜体编号',
    //   dataIndex: 'standTypeCode',
    //   width: 60,
    //  align: 'center',sorter: true,
    // },
    // {
    //   title: '标准柜体类型',
    //   dataIndex: 'standTypeDesc',
    // },
    // {
    //   title: '标准柜体名称',
    //   dataIndex: 'standTypeName',
    //   width: 60,
    //  align: 'center',sorter: true,
    // },

    // {
    //   title: '工序id',
    //   dataIndex: 'processId',
    // },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 100,
      fixed: 'right',
      align: 'center',
      hideInTable: thestate !== 0,
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(true);
            setFormTitle('编辑');
            form.setFieldsValue({
              bopCode: record.bopCode,
              bopName: record.bopName,
              processCode: record.processCode,
              processId: record.processId,
              processName: record.processName,
              sequence: record.sequence,
              standTypeCode: record.standTypeCode,
              standTypeDesc: record.standTypeDesc,
              standTypeId: record.standTypeId,
              standTypeName: record.standTypeName,
              standWorkHour: record.standWorkHour,
              standCycle: record.standCycle,
              id: record.id,
              isProductionProcess: record.isProductionProcess == 1 ? '是' : '否',
              showSelfInspection: record.showSelfInspection == 1 ? '是' : '否',
            });
          }}
        >
          工时周期
        </a>,
        // <a
        //   key="deleteKey"
        //   onClick={() => {
        //     Modal.confirm({
        //       title: '删除',
        //       content: '确定要删除吗',
        //       okText: '确认',
        //       cancelText: '取消',
        //       onOk: async () => {
        //         await delStandProductProcessInfo({ id: record.id });
        //         actionRef.current.reload();
        //       },
        //     });
        //   }}
        // >
        //   删除
        // </a>,
      ],
    },
  ];

  // 编辑提交按钮
  const handleSubmit = async () => {
    setConfirmLoading(true);
    form
      .validateFields()
      .then(async () => {
        const res = form.getFieldsValue();
        res.isProductionProcess = res.isProductionProcess == '是' ? 1 : 0;
        res.showSelfInspection = res.showSelfInspection == '是' ? 1 : 0;
        res.standWorkHour = parseFloat(res.standWorkHour).toFixed(2);
        res.standCycle = parseFloat(res.standCycle).toFixed(0);
        console.log(res,'编辑工时周期参数');
        const result = await updateStandProductProcessInfo(res);
        console.log(result);
        if (result != null) {
          message.success('工时周期修改成功');
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current!.reload();
      })
      .catch(() => {
        setConfirmLoading(false);
      });
  };

  //对工时数据进行按工序序列从小到大的顺序排序
  const ProductProcessInfoSort = (result: any) => {
    result.data.content.sort((a: any, b: any) => a.sequence - b.sequence);
  };
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="标准柜体工时周期维护"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        search={false}
        toolBarRender={(action, { selectedRows }) => [
          //返回隐藏
          // <Button
          //   key="button"
          //   icon={<ArrowLeftOutlined />}
          //   onClick={() => {
          //     history.push('/design/standProduct');
          //   }}
          //   type="primary"
          // >
          //   返回
          // </Button>,
          // <Button
          //   key="button"
          //   icon={<PlusOutlined />}
          //   onClick={() => {
          //   const filters = filterTranNew(ref.current.getFieldsValue());
          //   exportStandProductProcessInfo({
          //       current: 1,
          //       pageSize: 5000,
          //       filters: filters,
          //   }).then((res) => {
          //   const aLink = document.createElement('a');
          //   document.body.appendChild(aLink);
          //   aLink.style.display = 'none';
          //   aLink.href = window.URL.createObjectURL(res);
          //   aLink.setAttribute('download', `StandProductProcessInfo.xlsx`);
          //   aLink.click();
          //   document.body.removeChild(aLink);
          //   });
          //   }}
          //   type="primary"
          //   >
          //     导出
          //   </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const res = { ...params, standTypeId: thisstandid };
          const sorters = sortTran(sort);
          const filters = filterTranNew(res);
          const result = await getStandProductProcessInfoByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          // ProductProcessInfoSort(result);
          // console.log('排序后工时数据:', result);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 1500, y: 300 }}
        rowSelection={{}}
      />
      <Modal
        title="标准柜体工时周期维护"
        visible={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => setModalVisit(false)}
        width={840}
        destroyOnClose
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="right"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
          initialValues={{}}
        >
          <Form.Item name="id" label="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item name="standTypeId" label="standTypeId" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item name="processId" label="processId" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item name="sequence" label="sequence" hidden={true}>
            <Input />
          </Form.Item>
          {/* <Form.Item
            name="isProductionProcess"
            label="是否属于生产工序"
            rules={[{ required: true, message: '请输入是否属于工序工时!' }]}
            hidden={true}
          >
            <Input />
          </Form.Item> */}
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="standTypeCode"
                label="标准柜体编号"
                rules={[{ required: true, message: '请输入标准柜体编号!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="standTypeDesc"
                label="标准柜体类型"
                rules={[{ required: true, message: '请输入标准柜体类型!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="standTypeName"
                label="标准柜体名称"
                rules={[{ required: true, message: '请输入标准柜体名称!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="bopCode"
                label="工艺路径编号"
                rules={[{ required: true, message: '请输入工艺路径ID!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="bopName"
                label="工艺路径名称"
                rules={[{ required: true, message: '请输入工艺路径名称!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="processCode"
                label="工序编号"
                rules={[{ required: true, message: '请输入工序编号!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="processName"
                label="工序名称"
                // rules={[{ required: true, message: '请输入工序名称!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="isProductionProcess"
                label="属于生产工序"
                rules={[{ required: true, message: '请输入是否属于生产工序!' }]}
              >
                <Input
                  disabled
                  // placeholder={form.getFieldValue().isProductionProcess === 1 ? '是' : '否'}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="showSelfInspection"
                label="是否需要自检"
                rules={[{ required: true, message: '请输入是否需要自检!' }]}
              >
                <Input
                  disabled
                  // placeholder={form.getFieldValue().showSelfInspection == 1 ? '是' : '否'}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="standWorkHour"
                label="标准工时"
                rules={[{ required: true, message: '请输入标准工时!' }]}
              >
                <InputNumber
                  min={0}
                  max={1000000}
                  width={280}
                  step="0.01"
                  addonAfter="h"
                  stringMode
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="standCycle"
                label="标准周期"
                rules={[{ required: true, message: '请输入标准周期!' }]}
              >
                <InputNumber
                  min={0}
                  max={1000000}
                  width={280}
                  step="1"
                  addonAfter="天"
                  stringMode
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default StandProductProcessInfo;
